<template> 
    <!-- <div style="display: block;height: 100vh;  margin: 10px 10px; padding: 5px 5px; background-color: #FFF;"> -->
        <div style="padding: 10px 10px; background-color: #FFF; margin-left: 10px; margin-right: 10px;"> 
            <el-date-picker
                v-model="selectDate"
                type="week"
                placeholder="选择周"
                @change="handleSelectDate"
            />
            <el-button icon="ArrowLeft" circle  @click="handleLeftBtn"/>
            <el-button icon="ArrowRight" circle @click="handleRightBtn"/>
        </div>
        
        
        <div style="display: flex;height:100%; margin-left: 10px; margin-right: 10px;">
            <div style="background-color: #FFF;height: 100%;min-width:230px; border-right: 1px solid #DDDEE0;">菜单 </div>
            <div id="mycalendar" style="width: 100%;height: 100%"> </div>
        </div>  
        
        
    
        <div style="display: none" class="popup" id="popup"  >
          <div style="display:flex; padding: 10px 10px; height: 90%; position:relative;  ">
             <div style="position:absolute; cursor: pointer; right:10px; 
              text-align: center; border-radius: 5px; user-select: none; line-height: 18px;
              width: 23px; height: 23px; background-color: red; color:#FFF; z-index: 9999;" @click="closePopWin()">x</div>
            <div style ="position:relative; display:block;width: 100%; " >
                <div>{{ lastClickSchedule.classesName }}</div>
                <div>约 {{ lastClickSchedule.sday }} [周{{ lastClickSchedule.sdayWeek }}]  
                    {{ lastClickSchedule.startTimeShort }}  {{lastClickSchedule.endTimeShort}} {{ lastClickSchedule.classHour }}课时</div>
                <el-divider/>
                <div  >
                    <div>{{ lastClickSchedule.roomName }}</div> 
                    <div>{{ lastClickSchedule.teacherNames }}</div> 
                    <div>约课中，已预约0个</div> 
                    <div style="cursor: pointer;" @click="display= true">查看详情</div>  
 
                </div>
               
            </div>
            
            
            <!-- {
  "id": "1805233733149437954",
  "createUser": "1801796207866085377",
  "createDept": "1802722827182055425",
  "createTime": "2024-06-24 21:37:16",
  "updateUser": "1801796207866085377",
  "updateTime": "2024-06-24 21:37:16",
  "status": 1,
  "isDeleted": 0,
  "tenantId": "620335",
  "lessonsId": "1805233732482543617",
  "lessonsNo": 1,
  "classesId": "1804521067221164033",
  "classesRoomId": "1803067972926627842",
  "teacherIds": "1801794092112347138,1801795435409506306",
  "lessonName": "",
  "note": "",
  "imageUrl": "",
  "videoUrl": "",
  "fileUrl": "",
  "signUseCount": "",
  "signCount": "",
  "studentCount": 10,
  "classHour": 1,
  "startTime": "2024-06-24 21:36:00",
  "endTime": "2024-06-24 22:36:00",
  "appointmentStatus": "0",
  "classesName": "小小逻辑家SLM2&3",
  "roomName": "教室1",
  "teacherNames": "Carry,Doyin"
} -->

          </div>  
        </div> 
         
    <!-- </div> -->

    <transition name="drawer-transition">
        <div class="contain" v-show="display">
        <div class="drawerTage" @click="display = false">X</div>
        <div class="drawer">        
            <div> 教师:{{lastClickSchedule.teacherNames}} </div>
            <div> 教室:{{lastClickSchedule.roomName}} </div>
            <div> 扣课数:{{lastClickSchedule.classHour}}课时 </div>
            <el-divider/>              
            <qyPreBook :lesson="lastClickSchedule"></qyPreBook>          
        </div>
        </div>
    </transition>
     
</template>
<script>
import Calendar from '@toast-ui/calendar';  
import {getList,getDetail} from "@/api/classes/qyClassesLessonsDetails";
import "./toastui-calendar.min.css" 
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'   
import qyPreBook from '@/views/schedule/qyPreBook.vue'
 
export default {
    components:{
        qyPreBook,
    },   
    data() {
        return {
            display:false,    
            useCreatePopup: true,
            useDetailPopup: false,
            calendar: undefined,           
            selectDate: '',
            isinit:true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            data:[],
            lastClickSchedule:{},
            colorList:['#4B0082 ','#FF3333','#FF7744 ','#FFAA33','#EE7700','#4da','#FF1493 ','#0000FF99','#5599FF','#FF3EFF']                    
        }
    }, 
    methods: {
        init() {
            const that = this;
            this.calendar = new Calendar('#mycalendar', { 
                defaultView: 'week',
                scheduleView: ['time'],
                useFormPopup: this.useCreatePopup,
                useDetailPopup: this.useDetailPopup,
                usageStatistics: false,
                // isReadOnly:true,//禁止拖拉拽编辑               
                template: {
                // 自定义事件内容渲染                
                    timegridDisplayPrimaryTime({ time }) { //左边时间显示内容
                        return `${dayjs(time).format('HH:mm')}`
                    },
                  
                    milestone: function (model) {
                        // return '<span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
                        return 'fsadfsdafsdaf';
                    },
                    time(event) { 
                        let sdiv0 = `<div style=" 
                                width:100%; white-space: pre-line;     word-break: break-word;
                                height:100vh;                               
                                background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
                                background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
                                background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
                                background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
                                background-size: 20px 20px;  
                                background-color: '${event.backgroundColor}';
                                color:#FFF;">${event.title}</div>`

                        let sdiv1 = `<div style=" white-space: pre-line;   word-break: break-word;
                                width:100%;
                                height:100vh;
                                background-color: '${event.backgroundColor}';
                                color:#FFF;">${event.title}</div>`

                        if(event.state%2===0){
                            return sdiv0;    
                        } else
                        {
                            return sdiv1;
                        }                              

                         
                    },                                       
                },
                week: {
                    // taskView: false
                    dayNames: [ '星期天',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ],
                    startDayOfWeek: 1,
                    narrowWeekend: false,
                    workweek: false,
                    showNowIndicator: true,
                    showTimezoneCollapseButton: false,
                    timezonesCollapsed: false,
                    hourStart: 0,
                    hourEnd: 24,
                    eventView: ['time'],
                    taskView: false,
                    collapseDuplicateEvents: false,
                },
                disableResizing: true, // 禁止拉伸
                disableDrag: true // 禁止拖动
            });
            this.calendar.createEvents([ ]);
            // 创建
            this.calendar.on("beforeCreateEvent", (e) => {
                console.log("beforeCreateEventbeforeCreateEvent", e)
               
            })
            //修改
            this.calendar.on('beforeUpdateEvent', (e) => {
                console.log("修改", e)
                const targetEvent = e.event;
                const changes = { ...e.changes };
                this.calendar.updateEvent(targetEvent.id, targetEvent.calendarId, changes);
            });
            //删除
            this.calendar.on('beforeDeleteEvent', (e) => {
                console.log("删除", e)
                this.calendar.deleteEvent(e.id, e.calendarId);
            });
            
            this.calendar.on('clickMoreEventsBtn', function(event) {
     
                
               console.log("clickMoreEventsBtn", event)
                    
            });

            this.calendar.on('clickEvent', (e) => {
                

                const schedule = e.schedule;

                const id = e.event.id;
                getDetail(id).then(res=>{
                   
                    that.lastClickSchedule = res.data.data;
                    console.log(that.lastClickSchedule);
                })


                const popup = document.getElementById('popup');
                popup.style.display = 'block'; // 显示弹窗
                let offset = 230;
                
                if(that.isinit)
                {
                    if( that.$store.getters.isCollapse){
                        offset = 48; 
                    } else{
                        offset = 218;      
                    }  
                    that.isinit = false;
                }
                else{
                    if( that.$store.getters.isCollapse){
                        offset = 60; 
                    }
                } 
                let bodywidth = document.body.getClientRects()[0].width;
                let bodyheight = document.body.getClientRects()[0].height;

                let posxcal = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].right-offset   +1 +600;
                let posycal = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].top +240;
                console.log(`output->popup.style.leftpopup.style.left`, e )          
                if(posxcal>bodywidth){
                   
                    if(posycal>bodyheight){
                        popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].x  - offset  - 430 + 'px';  
                        popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top - 240 + 'px';
                    }else{
                        popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].x - offset  - 430 + 'px';  
                        popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top  + 1 + 'px';
                    }
                    
                    popup.style.position = "absolute"; 
                          
               
         

                }else{                                      
                    //   "toastui-calendar-event-time-content"
                    if( e.nativeEvent.srcElement.className ==="toastui-calendar-event-time-content"){
                        
                        if(posycal>bodyheight){
                            popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].left-offset +1+ 'px';  
                            popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top + - 240 + 'px';
                        }else{
                            popup.style.left = e.nativeEvent.srcElement.getClientRects()[0].right-offset +1+ 'px';  
                            popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top  + 1 + 'px';
                        }                        
                        popup.style.position = "absolute"; 
                              
                    }else{
                        
                          if(posycal>bodyheight){
                            popup.style.left = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].left-offset   +1+ 'px'; 
                            popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top - 240 + 'px';
                        }else{
                            popup.style.left = e.nativeEvent.srcElement.parentElement.parentElement.getClientRects()[0].right-offset   +1+ 'px'; 
                            popup.style.top = e.nativeEvent.srcElement.getClientRects()[0].top  + 1 + 'px';
                        }
                        popup.style.position = "absolute";  
                    }
                                 
                   
                }

                 
             });


           
        },
        hideall(){
            console.log(`output->hideallhideallhideallhideallhideall`)
        },
        handleLeftBtn() {
            this.calendar.prev()
        },
        handleRightBtn() {
            this.calendar.next()
        },
        handleSelectDate() {
            this.calendar.setDate(this.selectDate)
            this.onLoad();
        },
                
          getRandomComfortColor() {
            const hue = Math.floor(Math.random() * 360); // 色调在0-360之间
            const saturation = Math.floor(50 + Math.random() * 50); // 饱和度在50-100之间
            const brightness = Math.floor(20 + Math.random() * 80); // 明度在20-100之间            
            return `hsl(${hue}, ${saturation}%, ${brightness}%)`;
            },
            closePopWin(){
                const popup = document.getElementById('popup');
                popup.style.display = "none";  
            },
        onLoad() {            
            let values = {
            }; 
            this.calendar.clear();
            getList(this.page.currentPage, this.page.pageSize, values).then(res => {
                const data = res.data.data;
                // this.page.total = data.total;
              

                this.data = data.records;  

                console.log('==================',this.data )
                let idx = 0;
                this.data.forEach(item=>{ 
                    this.calendar.createEvents([
                    {
                        id: item.id,                        
                        // calendarId: 'cal1',
                        title: `${item.classesName}[${item.teacherNames}]`,
                        start: item.startTime,
                        end: item.endTime,
                        // isAllday: e.isAllday,
                        location: item.roomName,
                        state:  idx,
                        color: '#fff',
                        backgroundColor:  this.colorList[(idx++%9)],
                        dragBackgroundColor: 'gray',
                        borderColor: 'yello', 
                        // customStyle: { 
                        //     fontSize: '15px',                           
                        // },
                    }, // EventObject
                ])
                })
                 
            });
      }
    },
    mounted() {
        this.init();
        this.onLoad();
       
        // this.calendar.addEventListener('scroll', function() {
        //     console.log(`output->ddddddddddddddddddd`)
        //    
        // });
        const that = this;
        setTimeout(()=>{
                // 获取日历的滚动容器
            let obj = document.getElementsByClassName('toastui-calendar-panel toastui-calendar-time')
            
            // 绑定滚动事件
            obj[0].addEventListener('scroll', function(event) {
                // 处理滚动事件
                that.closePopWin();
                
            });
        },3000)
       
    }
}
</script>
<style lang="scss" scoped> 
 
:deep(.toastui-calendar-event-time-content){      
    font-weight:bold;
    font-size:12px;
    width: 100%;
                                  
}
:deep( .toastui-calendar-event-time){     
    border-left:0px solid green !important; 
    display: flex  !important;
    box-shadow: 0 1px 1px -1px rgba(34, 47, 62, 0.1), 0 4px 4px -4px rgba(34, 47, 62, 0.6);   
}
:deep(.toastui-calendar-event-time:hover) {
    box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.6);  
}
:deep(.toastui-calendar-popup-container) {
    display: none;
}
.popup{
    position:  relative;
    left:'500px';
    top:'500px';
    width: 420px;
    height: 240px;
    border-radius: 10px;
    z-index:9999; 
    background-color: #FFF;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}


 
:deep(.avue-crud .el-table th.el-table__cell, .avue-crud th) {
    background-color: #F5F7FA;
}

:deep(.avue-crud__header) {
    display: none;
}
.title {
    font-weight: bold;
    font-size: 16px; 
    padding-top: 10px;
    align-items: center;
}
 
.drawer-transition-enter-active,
.drawer-transition-leave-active {
  transition: transform 0.3s ease;
}
.drawer-transition-enter, .drawer-transition-leave-to /* .drawer-transition-leave-active for <2.1.8 */ {
  transform: translateX(100%);
}
.contain {
  position: relative;
  display: fixed;
  position: fixed;
  top: 0;
  right: 0;
  width: 650px;
  height: 100vh;
  z-index: 1000;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px 10px;
  width: 600px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.drawerTage {
  cursor: pointer;
  max-width: 100px;
  width: 100px;
  height: 50px;
  background-color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  border-radius: 10px 10px;
  padding-left: 10px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
</style>

